<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    // 玄幻奇幻排行榜
    const oneArr = [
        {
            "bookName": "女侠且慢",
            "author": "关关公子",
            "url": "/biquge/121794/"
        },
        {"bookName": "与君初相识", "author": "九鹭非香", "url": "/biquge/143885/"}, {
            "bookName": "万相之王",
            "author": "天蚕土豆",
            "url": "/biquge/8404/"
        }
    ];
    // 武侠仙侠排行榜
    const twoArr = [
        {"bookName": "大奉打更人", "author": "卖报小郎君", "url": "/biquge/9563/"},
        {
            "bookName": "仙武传",
            "author": "六界三道",
            "url": "/biquge/158402/"
        },
        {"bookName": "诛仙", "author": "萧鼎", "url": "/biquge/6640/"}
    ];
    // 都市言情排行榜
    const threeArr = [
        {
            "bookName": "私人瑜伽教练",
            "author": "大林木",
            "url": "/biquge/119659/"
        },
        {"bookName": "美艳教师", "author": "温梦卿李小兵", "url": "/biquge/31147/"},
        {
            "bookName": "神雕之龙儿别传",
            "author": "liubaoawp",
            "url": "/biquge/23156/"
        }
    ]
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    const BookInfo = (props) => (
        <div style={{color: props.color}}>
            {props.render()}
            {
                props.bookList.map((item, index) => (
                    <p key={index}>
                        <a target="_blank" href={"https://www.bqar.cc" + item.url}>{item.bookName}-{item.author}</a>
                    </p>
                ))
            }
        </div>
    )
    root.render((
        <div>
            <BookInfo render={()=>(
                <h3 style={{color:"red"}}>玄幻奇幻排行榜</h3>
            )} bookList={oneArr}/>

            <BookInfo render={()=>(
                <h3 style={{color:"green"}}>武侠仙侠排行榜</h3>
            )}  bookList={twoArr}></BookInfo>
        </div>
    ))
</script>
</html>